<template>
  <div class="NewQualification">
    <div v-if="Endisabled">
      <h2>{{ form.type == 1 ? "查看资质证明" : "查看荣誉证明" }}</h2>
    </div>
    <div v-else>
      <h2 v-if="form.type == 1">
        {{ ZZid ? "修改资质证明" : "新增资质证明" }}
      </h2>
      <h2 v-if="form.type == 2">
        {{ ZZid ? "修改荣誉证明" : "新增荣誉证明" }}
      </h2>
    </div>
    <!-- <h2>{{this.ZZid ?'修改资质证明':'新增资质证明'}}</h2> -->
    <div class="main mt-40">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="证书名称" prop="name">
          <a-input
            :disabled="Endisabled"
            v-model="form.name"
            placeholder="请输入证书名称"
          />
        </a-form-model-item>
        <a-form-model-item label="证书编号" prop="code">
          <a-input
            :disabled="Endisabled"
            v-model="form.code"
            placeholder="请输入证书编号"
          />
        </a-form-model-item>
        <a-form-model-item label="发证机构名称" prop="mechanism">
          <a-input
            :disabled="Endisabled"
            v-model="form.mechanism"
            placeholder="请输入发证机构名称"
          />
        </a-form-model-item>
        <a-form-model-item label="发证日期" prop="issueDate">
          <a-date-picker
            :disabled="Endisabled"
            v-model="form.issueDate"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择发证日期"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item label="证书有效期" prop="validityDate">
          <a-date-picker
            :disabled="Endisabled"
            v-model="form.validityDate"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择证书有效期"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item label="证书概述">
          <a-input
            :disabled="Endisabled"
            :maxLength="200"
            v-model="form.desc"
            type="textarea"
            placeholder="请输入证书概述"
          />
        </a-form-model-item>

        <!-- 上传资质图片 -->
        <a-form-model-item
          v-if="form.type == 1"
          ref="entLogo"
          label="证书图片"
          class="clearfix"
        >
          <viewer :images="form.attachment">
            <div
              class="img-box mr-20 f-left"
              v-for="(item, index) in form.attachment"
              :key="index"
            >
              <img :src="item.fileUrl" alt="" />
              <a-icon
                v-if="!Endisabled"
                class="close"
                type="close-circle"
                @click="DelImag(item.id, index)"
              />
            </div>
          </viewer>
          <div
            class="uploadlogo f-left"
            v-if="form.type == 1 && form.attachment.length < 5"
          >
            <a-upload
              v-if="!Endisabled"
              :action="UploadUrl"
              :headers="headers"
              :before-upload="beforeUpload"
              @change="handleChange"
              :show-upload-list="false"
            >
              <a-button type="primary"> 上传附件</a-button>
            </a-upload>
          </div>
        </a-form-model-item>

        <!-- 上传荣誉图片 -->
        <a-form-model-item
          v-if="form.type == 2"
          ref="entCertFiles"
          label="证书图片"
          class="clearfix"
        >
          <viewer :images="form.attachment">
            <div
              class="img-box mr-20 f-left"
              v-for="(item, index) in form.attachment"
              :key="index"
            >
              <img :src="item.fileUrl" alt="" />
              <a-icon
                v-if="!Endisabled"
                class="close"
                type="close-circle"
                @click="DelImag(item.id, index)"
              />
            </div>
          </viewer>
          <div
            class="uploadlogo f-left"
            v-if="
              form.type == 2 && form.attachment && form.attachment.length < 1
            "
          >
            <a-upload
              v-if="!Endisabled"
              :action="UploadUrl"
              :headers="headers"
              :before-upload="beforeUpload"
              @change="handleChange"
              :show-upload-list="false"
            >
              <a-button type="primary"> 上传附件</a-button>
            </a-upload>
          </div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
          <span v-if="!Endisabled">
            <a-button
              v-if="ZZid == ''"
              :disabled="IsDisable"
              type="primary"
              @click="onSubmit"
            >
              提交
            </a-button>
          </span>
          <span v-if="!Endisabled">
            <a-button v-if="ZZid" type="primary" @click="onSubmit">
              保存
            </a-button>
          </span>

          <a-button style="margin-left: 10px" @click="resetForm">
            <!-- <router-link to="/usercenter/BaseInformation">
              返回
            </router-link> -->
            返回
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import {
  addEntCert,
  getEntCertById,
  updateEntCert,
} from "@/apis/user/EntBaseInfo";
import { getToken, getCookiesUserInfo } from "@/utils/auth"; // get token from cookie
import {
  addQualificantion,
  getQualificantionDetail,
  editQualificantion,
} from "@/apis/com/qualification";

const rules = {
  name: [
    {
      required: true,
      message: "请输入证书名称",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入证书编号",
      trigger: "blur",
    },
  ],
  mechanism: [
    {
      required: true,
      message: "请输入发证机构名称",
      trigger: "blur",
    },
  ],
  issueDate: [
    {
      required: true,
      message: "请选择发证日期",
      trigger: "change",
    },
  ],
  validityDate: [
    {
      required: true,
      message: "请选择证书有效期",
      trigger: "change",
    },
  ],
  attachment: [
    {
      // required: true,
      message: "请上传荣誉证书",
      trigger: "blur",
    },
  ],
};

export default {
  data() {
    return {
      IsDisable: false,
      Endisabled: false,
      EntId: "",
      EntInfo: {},
      UploadUrl: GolbUrl.BASIC_UPLOAD_URL,

      // UploadUrl: "http://10.204.124.107:8081/wenge/microservice-supply-consumer-web/sysFile/upload",

      isClear: false,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      ZZid: "",
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        companyId: JSON.parse(getCookiesUserInfo()).companyId,
        attachment: [],
        name: "", //证书名称
        code: "", //证书编号
        mechanism: "", //发证机构名称
        issueDate: "", //发证日期
        validityDate: "", //	证书有效期
        desc: "", //认证概述
        type: 1,
        status: 1,
      },
      rules: {},
    };
  },
  created() {
    if (this.$route.query.id) {
      this.ZZid = this.$route.query.id;
      this.getEntCertById();
    }

    if (this.$route.query.type) {
      this.form.type = this.$route.query.type;
    }

    if (this.$route.query.look) {
      this.Endisabled = true;
      this.rules = {};
    } else {
      this.Endisabled = false;
      this.rules = rules;
    }
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.warning("请上传正确的文件格式");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.warning("请上传5M以内的大小图片");
        return false;
      }
      return isJpgOrPng && isLt2M;
    },

    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        console.log("handleChange", info);
        // Get this url from response in real world.
        let _files = {
          id: "",
          fileName: info.file.name,
          fileType: info.file.type,
          fileUrl: info.file.response.data.url,
          objctType: this.form.type == 1 ? 3 : 4, //1:产品图片;2:产品资质荣誉;3:企业资质;4:企业荣誉奖项;5:招商附件;6:招标附件
        };
        this.form.attachment.push(_files);
      }
    },

    DelImag(id, index) {
      console.log(id);
      if (this.form.delFiles) {
        this.form.delFiles.push(id);
      } else {
        this.$set(this.form, "delFiles", []);
        this.form.delFiles.push(id);
      }
      console.log(this.form);
      this.form.attachment.splice(index, 1);
    },
    //新增保存资质
    addEntCert() {
      this.IsDisable = true;
      addQualificantion(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            setTimeout(() => {
              // this.$router.push("/usercenter/BaseInformation");
              this.$router.back();
              this.IsDisable = false;
            }, 500);
          } else {
            this.IsDisable = false;
            this.$message.warning("新增失败");
          }
        })
        .catch((error) => {
          this.IsDisable = false;
        });
    },

    updateEntCert() {
      this.IsDisable = true;
      this.form.approvalSt = 0;
      editQualificantion(this.form)
        .then((res) => {
          this.IsDisable = false;

          if (res.code == 200) {
            this.$message.success("修改成功");
            setTimeout(() => {
              this.$router.back();
            }, 500);
          } else {
            this.$message.warning("修改失败");
          }
        })
        .catch((error) => {
          this.IsDisable = false;
        });
    },
    //获取资质详情
    async getEntCertById() {
      const res = await getQualificantionDetail(this.ZZid);
      if (res.code == 200) {
        if (!res.data.attachment) {
          res.data.attachment = [];
        }
        this.form = res.data;
      }
    },
    onSubmit() {
      console.log("this.form", this.form);

      // return
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ZZid) {
            this.updateEntCert();
          } else {
            this.addEntCert();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$router.back();
    },
    clear() {
      // 清空表单
      this.form.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.NewQualification {
  padding: 21px 24px;
  background-color: #fff;
  border-radius: 4px;

  h2 {
    font-size: 22px;
    color: #303133;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: solid 1px #e9e9e9;
  }
}

/* tile uploaded pictures */
.ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}

.ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}

.ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}

.img-box {
  position: relative;
  padding: 5px;
  border: 1px solid #e8e8e8;
  margin-bottom: 10px;

  &:nth-child(4n) {
    margin-right: 0;
  }

  img {
    width: 198px;
    height: 174px;
    object-fit: cover;
  }

  &:hover {
    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    top: -10px;
    right: -10px;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 20px;
    z-index: 99;
    background-color: red;
    border-radius: 100%;
    cursor: pointer;
    display: none;
  }
}

textarea {
  min-height: 100px !important;
}

/deep/ .ant-input[disabled] {
  color: #000;
  background-color: #fff;
}
</style>
